<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Async/await</title>
    <!-- CDN 引入vue 和 axios -->
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>

<body>
    <div id="app">

        <!-- 输入框区域 -->
        <div style="height:50px">
            <input type="text" placeholder="请输入电话号码" v-model="phoneNum">
            <button @click="getFaceResult">确定</button>
        </div>

        <!-- 充值面值 显示区域 -->
        <div>
            充值面值：
            <span v-for="item in faceList" :key='item'>
                <span style="border:1px solid black;font-weight:bold;">{{item}}</span>
            </span>
        </div>
    </div>

    <!-- js 代码区域 -->
    <script>
        new Vue({
            el: '#app',
            data: {
                phoneNum: '6666',
                faceList: []
            },
            methods: {
                //获取到城市信息
                getLocation(phoneNum) {
                    return axios.post('phoneLocation?phoneNum=' + phoneNum, {
                        phoneNum
                    })
                },
                // 获取面值
                getFaceList(province, city) {
                    return axios.post('/faceList?province=' + province + "&city=" + city, {
                        province,
                        city
                    })
                },
                // 点击确定按钮时，获取面值列表
                async getFaceResult() {
                    try {
                        let location = await this.getLocation(this.phoneNum);
                        if (!location.data.success) { return; }
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (!result.data.success) { return; }
                        this.faceList = result.data.obj;
                    } catch (error) {
                        console.log(error);
                    }
                }
            }
        })
    </script>
</body>

</html>